<template>
	<view>
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="">
				<view class="position-relative flex flex-column " >
					<u-image :src="$_BASE_IMG_API + bgImage" :height="181 + statusBarHeight + 'px'" mode="aspectFill"></u-image>
					<view class="position-absolute left-0 top-0" :style="{height: 181 + statusBarHeight + 'px', width: '750rpx'}">
						<u-navbar :isBack="false" :borderBottom="false" titleColor="#fff" :isFixed="false" :background="{background: 'transparent'}" title="个人中心">
						</u-navbar>
						<view class="flex align-center u-p-x-30 u-m-t-20 position-relative">
							<view class="u-m-l-20" style="bgc">
								<u-avatar :src="userInfo.avatar" size="120"></u-avatar>
							</view>
							<view class="flex-1 flex flex-column u-m-l-20 " v-if="isLogin">
								<view class="flex justify-between">
									<view class="flex justify-between">
										<text class="text-white u-font-35 u-m-r-20 u-line-1" style="max-width: 300rpx;">{{userInfo.nickname}}</text>
										<view class="">
											<u-tag :text="userInfo.levelname" shape="circle" mode="plain" color="#fff"></u-tag>
										</view>
									</view>
								</view>
								<text class="text-white u-font-24 u-m-b-10">{{userInfo.mobile}}</text>
								<text class="text-white u-font-24">邀请码：{{userInfo.username}}</text>
							</view>
							<view class="u-m-l-30" v-else>
								<navigator url="/pages/login/login/loginWeixin">
									<button size="mini">去登录</button>
								</navigator>
							</view>
						</view>
					</view>
					</view>
				<view class="flex flex-column u-m-x-20" style="margin-top: -30rpx;">
					<mine-order :list="orderList" :orderType="5"></mine-order>
				</view>
			</view> 
		</mescroll-body>	
    	<u-tabbar v-model="tabbarCurrent" :list="list" @change="tabbarChange" active-color="#fe582b" inactive-color="#999999"></u-tabbar>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { MineCenterApi } from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [{
						iconPath: "/static/tabbar/supplier.png",
						selectedIconPath: "/static/tabbar/supplier-active.png",
						text: '商圈',
						pagePath: "/pages/tabbar/supplier/supplier"
					},
					{
						iconPath: "/static/tabbar/mine.png",
						selectedIconPath: "/static/tabbar/mine-active.png",
						text: '我的',
						pagePath: "/pages/supplierPage/supplierMine/supplierMine"
					},
					{
						iconPath: "/static/supplier/tabbar/shopfh.png",
						selectedIconPath: "/static/supplier/tabbar/shopfh.png",
						text: '返回商城',
						pagePath: "/pages/tabbar/index/index"
					},
				],
				tabbarCurrent: 1,
				upOption:{
					isLock: true,
					auto: false
				},
				downOption:{
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textColor: '#000'
				},
				statusBarHeight: statusBarHeight,
				bgImage: '',
				detailList: [
					// {title: '账户明细'}, 
					{title: '中奖记录'}, 
					// {title: '奖金明细'}, 
					{title: '提现记录'}],
			};
		},
		computed: {
			orderList() {
				return [
					{title: '待付款', count: 0}, 
					{title: '待发货', count: 0}, 
					{title: '待收货', count: 0}, 
					{title: '待评价', count: 0}, 
					{title: '退款/售后', count: 0}]
			},
			height() { 
				console.log(uni.upx2px(383)+ statusBarHeight);
				return uni.upx2px(383)+ statusBarHeight +'px'
			},
			marginTop() {
			  // #ifdef H5
			  return '-70rpx'
			  // #endif
				// #ifdef APP-PLUS || MP-WEIXIN 
				return '-50rpx'
				// #endif
			},
		},
		onShow() {
			if(this.isLogin) this.$store.dispatch('user/getUserInfo')
			this.getConfig()
		},
		methods: {     
			tabbarChange(e){
				if(e==this.current) return
				uni.redirectTo({
					url: this.list[e].pagePath
				})
			},
			_initData() {
				this.getConfig()
				this.$store.dispatch('user/getUserInfo')
			},
			// 下拉刷新回掉
			downCallback() {
				this._initData()
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {
				this.mescroll.endErr()
			},
			// 获取配置
			getConfig() {
				MineCenterApi.getConfig().then(res => {
				  console.log('获取配置', res);
					if(res.code == 1){
						this.bgImage = res.data.data.user_center
						console.log();
					}else {
						console.log(res);
					}
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/setting/setting'
				})
			},
			toPage() {
				if(!this.isLogin) return this._login()
				uni.navigateTo({
					url: '/pages/mine/mineBalance/asset/asset'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.u-cell {
	padding-bottom: 0;
}
::v-deep .u-cell_title {
	font-weight: bold;
}
::v-deep .u-grid-item-box {
	padding: 0 !important;
}
::v-deep .u-mode-plain-primary {
	border: none;
	background: linear-gradient(-30deg,#fdd388,#e6a230);
}
::v-deep .mescroll-upwarp {
	min-height: 0 !important;
}

</style>
